<template>
  <div>
    <ul class="botm">
      <li @click="btnFn('外卖')">
        <i
          class="iconfont icon-elment-copy"
          :class="{ elema: val == '外卖' }"
        ></i>
        <span>外卖</span>
      </li>
      <li @click="btnFn1('搜索')">
        <i class="iconfont icon-compass" :class="{ elema: val == '搜索' }"></i>
        <span>搜索</span>
      </li>
      <li @click="btnFn2('订单')">
        <van-icon name="orders-o" :class="{ elema: val == '订单' }" />
        <span>订单</span>
      </li>
      <li @click="btnFn3('我的')">
        <van-icon name="manager-o" :class="{ elema: val == '我的' }" />
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    this.val = this.value ? this.value : this.elema;
  },
  props: ["value", "elema", "longitude", "latitude"],
  data() {
    return {
      val: "外卖",
    };
  },
  methods: {
    btnFn(val) {
      console.log(0);
      this.val = val;
      this.$router.push({
        path: "/index",
      });
    },

    btnFn1(val) {
      console.log(1);
      this.val = val;
      this.$router.push({
        path: "/goodsearch",
        query: {
          name: JSON.parse(localStorage.getItem("name")),
          longitude: JSON.parse(localStorage.getItem("longitude")),
          latitude: JSON.parse(localStorage.getItem("latitude")),
          val: "搜索",
        },
      });
    },

    btnFn2(val) {
      console.log(2);
      this.val = val;
      this.$router.push({
        path: "/orderList",
      });
    },

    btnFn3(val) {
      console.log(3);
      this.val = val;
      this.$router.push({
        path: "/user",
        query: {
          name: JSON.parse(localStorage.getItem("name")),
          longitude: JSON.parse(localStorage.getItem("longitude")),
          latitude: JSON.parse(localStorage.getItem("latitude")),
          val: "我的",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.botm {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    .elema {
      color: #3190e8;
    }
    font-size: 13px;

    .van-icon {
      font-size: 20px;
    }
  }
}
</style>